{% extends "main/auth_views/card.html" %}

{% block head %}
  {{ block.super }}
  <title>欢迎注册</title>
  <style>
      .btn-outline-secondary:hover {
          color: var(--bs-secondary-color);
          background: rgba(var(--bs-secondary-rgb), 0.125);
      }

      span.spinner-border {
          transition: all 0.8s cubic-bezier(0, 1, 0, 1) !important;
          scale: 30;
          --bs-spinner-border-width: 0.4em !important;
          opacity: 0 !important;
      }

      .activated span.spinner-border {
          scale: 1;
          --bs-spinner-border-width: 0.18em !important;
          opacity: 1 !important;
      }

      .activated span.buttonText {
          opacity: 0 !important;
      }

      .d-grid {
          left: 0;
          top: 0;
          place-items: center;
      }
  </style>
{% endblock %}

{% block card %}
  <form method="post" accept-charset="UTF-8" enctype="multipart/form-data" action="/register" class="col">

    {% csrf_token %}

    <p>
      <label class="form-label" for="usernameInput"> 用户名 </label>
      <span class="input-group">
        <iconify-icon icon="line-md:account" class="input-group-text"></iconify-icon>
        <input required maxlength="50" name="username" type="text" id="usernameInput" class="form-control"/>
      </span>
    </p>

    <p>
      <label class="form-label" for="passwordInput"> 密码 </label>
      <span class="input-group">
        <iconify-icon icon="material-symbols:key-outline-rounded" class="input-group-text"></iconify-icon>
        <input required maxlength="50" name="password" type="password" id="passwordInput" class="form-control"/>
      </span>
    </p>

    <p>
      <label class="form-label" for="passwordConfirm"> 确认密码 </label>
      <span class="input-group">
        <iconify-icon icon="material-symbols:key-outline-rounded" class="input-group-text"></iconify-icon>
        <input required maxlength="50" type="password" id="passwordConfirm" class="form-control"/>
      </span>
    </p>

    <p>
      <label class="form-label" for="emailInput"> 邮箱 </label>
      <span class="input-group">
        <iconify-icon icon="line-md:email-opened-twotone" class="input-group-text"></iconify-icon>
        <input maxlength="100" name="email" type="email" id="emailInput" class="form-control"/>
      </span>
    </p>

    <button type="submit" class="mb-2 mt-4 w-100 btn btn-primary border-0 overflow-hidden position-relative">
      <span class="position-absolute w-100 h-100 d-grid">
        <span role="status" class="spinner-border spinner-border-sm" aria-hidden="true"></span>
      </span>
      <span class="buttonText"> 注册 </span>
    </button>

    <a href="{% url "login" %}" class="btn btn-outline-secondary w-100 border-0">已有账号？立即登录</a>

  </form>

  <script>
    const submitButton = document.querySelector("button[type=submit]")
    const [pwdInput1, pwdInput2] = document.querySelectorAll("input[type=password]")
    const spinner = document.querySelector("span[role=status]")
    submitButton.addEventListener("click", (ev) => {
      if (pwdInput1.value !== pwdInput2.value) {
        ev.preventDefault()
        alert("两次输入密码不一致！")
      } else if (!document.querySelector("input:invalid")) {
        submitButton.classList.add("activated")
        setTimeout(() => submitButton.setAttribute("disabled", "true"), 0)
      }
    })

    for (let p of document.querySelectorAll("form > p")) {
      p.getElementsByTagName("input")[0].addEventListener("change", () => {
        p.classList.add("was-validated")
      }, {once: true})
    }
  </script>
{% endblock %}
